<template>
  <el-form-item label-width="0">
    <el-divider class="custom-divider-margin-top">组件特有属性</el-divider>
    <div class="attributeEDR-editor">
      <div>
        <span class="label_">链接内容</span>
        <el-input type="text" v-model="optionModels.linkName"></el-input>
      </div>
      <div>
        <span class="label_">链接地址</span>
        <el-input type="text" v-model="optionModels.url"></el-input>
      </div>
      <div>
        <span class="label_">链接方式</span>
        <el-select v-model="optionModels.target" size="mini">
          <el-option label="default" value=""></el-option>
          <el-option label="_blank" value="_blank"></el-option>
          <el-option label="_parent" value="_parent"></el-option>
          <el-option label="_self" value="_self"></el-option>
          <el-option label="_top" value="_top"></el-option>
        </el-select>
      </div>
      <div>
        <span class="label_">链接类型</span>
        <el-select v-model="optionModels.type" size="mini">
          <el-option label="default" value="primary"></el-option>
          <el-option label="success" value="success"></el-option>
          <el-option label="warning" value="warning"></el-option>
          <el-option label="danger" value="danger"></el-option>
          <el-option label="info" value="info"></el-option>
        </el-select>
      </div>
      <div>
        <span class="label_">是否禁用</span>
        <el-switch v-model="optionModels.disabled"></el-switch>
      </div>
      <div>
        <span class="label_">是否有下划线</span>
        <el-switch v-model="optionModels.underline"></el-switch>
      </div>
    </div>
  </el-form-item>
</template>
<script>
export default {
  name: "link-editor",
  components: {},
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  computed: {
    optionModels() {
      return this.selectedWidget.options.link;
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.attributeEDR-editor {
  > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 5px;

    .el-input {
      width: calc(100% - 132px);
    }

    .label_ {
      display: inline-block;
      width: 120px;
      box-sizing: border-box;
      padding-right: 12px;
      font-size: 13px;
      color: #606266;
    }
  }
}
</style>
